<template>
  <div>
    <!-- <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="数据统计" name="sjtj">
        <el-row>
          <el-col :span="18">
            <div style="width:100%;text-align:center">
              <h1>开发区各村常住人口区域分布图</h1>
            </div>
            <div align="center" id="histogram" style="width:95%; height:800px"></div>
          </el-col>
          <el-col :span="6">
            <div class="tjInfo">
              <h2 style="padding:12px">数据统计</h2>
              <div>
                <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                  <tr>
                    <td>地区</td>
                    <td>户籍人口</td>
                  </tr>
                  <tr v-for="(v,index) in area" :key="v" :class="index%2==0?'mycolor':''">
                    <td>{{v}}</td>
                    <td>{{areaData[index]}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="数据检索" name="sjjs"> -->
        <el-row>
          <el-col :span="3">
            <tree-component @GetNodeValue="GetNodeValue"></tree-component>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="8">
                <el-button @click="visible2=true" style="float:left;" type="success">
                  <img src="../../assets/daoru.png" alt=""> 导出
                </el-button>
              </el-col>
              <el-col :span="16">
                <div align="right">
                  <el-input style="width:200px" v-model="filters.name" placeholder="姓名"></el-input>
                  <el-input style="width:200px" v-model="filters.certifID" placeholder="身份证号"></el-input>
                  <el-input style="width:200px" v-model="filters.address" placeholder="住址"></el-input>
                  <el-button type="primary" icon="search" @click="getResidentInfo">查询</el-button>
                  <el-button type="primary" @click="showAll"><i class="fa fa-refresh fa-lg"></i> 显示所有</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="padding-top:10px">
                <el-table :data="dataList" style="width:100%">
                  <el-table-column style="width:50px" label="编号" prop="servedPersonID" align="center">
                  </el-table-column>
                  <el-table-column label="姓名" prop="name" align="center">
                  </el-table-column>
                  <el-table-column label="性别" prop="sex" align="center">
                    <template scope="scope">
                      {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                    </template>
                  </el-table-column>
                  <el-table-column label="政治面貌" prop="politics" align="center">
                  </el-table-column>
                  <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                  </el-table-column>
                  <el-table-column label="出生日期" prop="birthDate" align="center">
                  </el-table-column>
                  <el-table-column label="职业" prop="career" align="center">
                  </el-table-column>
                  <el-table-column label="移动电话" prop="mobileTel" align="center">
                  </el-table-column>
                  <el-table-column label="操作" width="300" align="center">
                    <template scope="scope">
                      <el-button type="text" @click="watchDetail(scope.row.certifID)" size="small">查看详情</el-button>
                      <el-button type="text" size="small" @click="editDetail(scope.row.certifID)">编辑</el-button>
                      <el-button type="text" size="small" @click="deleteById(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="margin-top:10px" align="right">
                <el-pagination layout="prev, pager, next" :current-page="currentPage" :total="totalInfo" @current-change="handleCurrentChange">
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
       </el-row>
      <!-- </el-tab-pane>
    </el-tabs>  -->

    <el-dialog top="5%" title="查看详情" :visible.sync="visible">
      <info :id="id"></info>
    </el-dialog>
    <export-dialog :visible="visible2" :filters="filters" :fileName="'户籍人口信息'" @setVisible="setVisible" />
  </div>
</template>

<script>
import * as api from "@/api/realpopulation/index";
import * as api2 from "@/api/zonghezhili/duiwujianshe"
import treeComponent from '../../components/common/treeComponent'
import info from "./personInfo"
import exportDialog from './exportComponent'


export default {
  components:{
    "treeComponent":treeComponent,
    info:info,
    exportDialog
  },
  data() {
    return {
      currentPage:1,
      activeName: "sjtj",
      histogram: null,
      visible2:false,
      filters: {
        // 查询表单
        name: null, // 姓名
        netGridID:null,
        certifID: null, //身份证
        address:null,
        page: 1, // 页码
        pageSize: 10, // 页号
        servedPersonTypeValue:'01'
      },
      totalInfo: 40, // 页码总
      sexs: [
        {
          v: '0',
          l: "未知的性别"
        },
        {
          v: '1',
          l: "男性"
        },
        {
          v: '2',
          l: "女性"
        },
        {
          v: '9',
          l: "未说明性别"
        }
      ],
      dataList: [],
      list:[],
      area:['开发区村','夏林村','玉晨村','墓东村','潘冲区','李塔村','上杆村','马埂村','天乐村','后河村'],
      areaData:[5729,4209,4027,2609,3450,4046,2724,2572,1606,2217],
      id:"1",
      visible:false,

    };
  },
  methods: {
    setVisible(v){
      this.visible2 = v;
    },
    handleCheckAllChange(event) {
      if (this.checkAll) {
        this.checkTitles = [];
        this.prop.forEach(k => {
          this.checkTitles.push(k.label);
        });
        this.checkValues = [...this.prop];
      } else {
        this.checkTitles = [];
        this.checkValues = [];
      }
      this.isIndeterminate = false;
    },
    showAll(){
      this.filters.name = this.filters.netGridID = this.filters.certifID = this.filters.address = null
      this.getResidentInfo()
    },
    GetNodeValue(id){
      this.filters.netGridID = id
      this.getResidentInfo()
    },
    deleteById(row){
       this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          api2.deleteServedPerson(row.servedPersonTypeValue,row.certifID).then(res => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    editDetail(ID){
      this.$router.push({path:"editSyrkPersonInfo",query:{id:ID}});
    },
    watchDetail(id) {
      this.id = id;
      this.visible = true;
    },

    // 获取常住人口的信息
    getResidentInfo() {
      api2.fetchServedMemberInfo(this.filters).then(res => {
        this.dataList = res.data.queryVO;
        this.totalInfo = res.data.page.totalCount;
      });
      this.filters.servedPersonTypeValue = '01'
    },
    // 翻页
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getResidentInfo()
    },
    // 绘制柱状图
    drawHistogram(cun,datas) {
      this.histogram = echarts.init(document.getElementById("histogram"));
      this.histogram.setOption({
        color: ["#c23531"],
        title: {
          text: "当前常住人口分布情况"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
            feature: {
              saveAsImage: {}
            }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: cun
        },
        xAxis: [
          {
            type: "category",
            data:cun,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              interval:0,
              rotate:-30
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "常住人口",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
    }
  },
  mounted() {
    if(this.$store.getters.user.userRole!='超级管理员')
      this.filters.netGridID = this.$store.getters.user.netGridID
    this.getResidentInfo()
    // api.getServedHistogramCount('01').then(res=>{
    //   let cun = res.data[0]
    //   let datas = res.data[1]
    //   this.drawHistogram(cun,datas);

    //   this.area = cun
    //   this.areaData = datas
    // })
    this.$store.commit("INIT_PAGE","C");
    this.filters.page = this.$store.getters.page['C'];
    this.currentPage = this.filters.page;

    //  this.drawHistogram(this.area,this.areaData);
  }
};
</script>

<style scoped>
.tjInfo {
  /* margin-top: 50px; */
  background-color: aliceblue;
  width: 100%;
  height: 800px;
  /* padding: 10px; */
  /* text-indent: 2em; */
}
.userInfoEditTable,
.userInfoEditTable td {
  /* font-size: 8px; */
  border: 1px solid darkgrey;
  padding: 10px;
  text-align: center;
}
</style>
